<script setup>
import TodoHeader from "./components/TodoHeader.vue"
import TodoMain from "./components/TodoMain.vue"
import TodoFooter from "./components/TodoFooter.vue"
import { ref,provide,watch } from "vue"

const todos = ref([])
provide('todos',todos)


const handleTodoList = (todo) => {
  todos.value.push(todo)
}


const handleToggle = (id, checked) => {
  const index = todos.value.findIndex((todo) => todo.id === id)
  todos.value[index].done = checked
}
//修改内容
const handleEdit = (id, content) => {
  const index = todos.value.findIndex((todo) => todo.id === id)
  todos.value[index].content = content
}
 //持久到本地
 watch(todos, (newValue) => {  
localStorage.setItem('todos', JSON.stringify(newValue));  
}, { deep: true });  

  

// 提供todos给子组件  

provide('todos', todos);  

</script>

<template>
  <TodoHeader @addTodoList="handleTodoList"></TodoHeader>
  <TodoMain
    v-for="(todo,index) in todos"
    :key="todo.id"
    v-bind="todo"
    @toggle="handleToggle"
    @edit="handleEdit"
  ></TodoMain>
  <TodoFooter
  v-model="todos"
  :todos="todos"

  ></TodoFooter>

</template>

<style scoped></style>
